<template>
	<view class="flex flex-ai-center mt-12">
		<w-tabs  :tabList="tabList" :current='current' @change="changeTab" :lineWidth="30" :lineHeight="5" :itemStyle="{width:'200rpx'}"></w-tabs>
		<!-- <w-icon name="more-cate" class="ml-8" size="16" @click="toManager"></w-icon> -->
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number,
				default: 0
			},
			goodsType: Number,
			tabList: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				activeStyle: {
					color: '#FFFFFF',
					fontSize: '32rpx',
					fontWeight: 500,
					background: 'linear-gradient(139deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.09) 100%)',
					borderRadius: '48rpx',
					borderImage: 'linear-gradient(157deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.6)) 2 2',
					border: '2rpx solid',
					padding: '4rpx 24rpx'
				},
				inactiveStyle: {
					color: '#CCCCCC',
					fontSize: '28rpx',
				},
				baseList: []
			}
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		computed: {
			current() {
				return this.tabList.findIndex(v => v.id === this.value)
			},
		},
		mounted() {

		},
		methods: {
			changeTab({
				id
			}) {
				this.$emit('change', id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cate-tab {
		background: #191828;
		border-radius: 72rpx;
		width: 100%;
		display: flex;
		// align-items: center;
	}

	/deep/.u-tabs__wrapper__nav__line {
		display: none;
	}

	/deep/.u-tabs__wrapper__nav__item {
		height: auto !important;
		padding: 8rpx 24rpx;
		margin-right: 22rpx;
		flex-shrink: 0;

		&:last-child {
			margin-right: 0;
		}
	}
</style>